<template>
    <div class="com-cnt">
        <cnt-com>
            <gapright-com>
                <itemcnt-Com
                    v-for="(item, index) in data"
                    :key="index"
                    type="1"
                >
                    <router-link :to="'/travel/'+item.id" tag="div">
                        <updownitem-com :GapLeftTop="true">
                            <div slot="up" class="img-up-com">
                                <span class="pic">
                                    <img :src="item.picture" alt="">
                                </span>                                        
                            </div>
                            <div slot="down" class="info-down-com">
                                <h3 class="title">{{item.title}}</h3>
                                <p class="num">￥{{item.price}}</p>                                      
                            </div>
                        </updownitem-com>
                    </router-link>
                </itemcnt-Com>
            </gapright-com>
        </cnt-com>
    </div>
</template>

<script>
    import CntCom from '@/common/cnt/Cnt.vue'
    import ItemcntCom from '@/common/list/Itemcnt.vue'
    import GaprightCom from '@/common/cnt/Gapright.vue'
    import UpdownitemCom from '@/common/list/UpdownItem.vue' 
    export default {
        name: "indexComAComponent",
        props: {
            data: Array
        },
        components: {
            CntCom,
            ItemcntCom,
            UpdownitemCom,
            GaprightCom           
        }
    }
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/mixins.styl'
.com-cnt 
    width 100%
    height auto 
    overflow hidden
.img-up-com
    width 100%
    height auto 
    overflow hidden
    .pic 
        width 100%
        height auto 
        overflow hidden
        img 
            display block
            width 100%
            height auto
.info-down-com 
    width 100%
    height auto 
    overflow hidden
    .title  
        width 100%
        height 30px
        line-height 30px
        font-size 16px
        color #333
        ellipsis()
    .num 
        width 100%
        height 25px
        line-height 25px
        font-size 12px
        color red
        ellipsis()
</style>